<template>
  <van-popup class="kefu-popup" :show="true">
    <div class="box">
      <van-image round class="avatar" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <div class="info">
        <p class="align-center white fs-24">张思思</p>
        <p class="align-center white">您好，我是您的专属客服经理</p>
      </div>
      <div class="qrCode">
        <van-image width="100" height="100" :src="qrcodeUrl" />
        <p class="align-center gray-6 mt-20">长按识别二维码，添加我的企业微信</p>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
import { Popup, Overlay, Image as VanImage } from 'vant';
import { getCustomerQrcode } from '@/api/pay';

export default {
  name: 'CustomerService',
  components: {
    [Popup.name]: Popup,
    [Overlay.name]: Overlay,
    [VanImage.name]: VanImage,
  },
  setup() {
    const state = reactive({
      qrcodeUrl: '',
    });
    onMounted(async () => {
      const res = await getCustomerQrcode();
      state.qrcodeUrl = res.data.qrcodeUrl;
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style>
.kefu-popup {
  background-color: transparent !important;
}
</style>
<style lang="less" scoped>
.box {
  position: relative;
  width: 80vw;
  height: 70vh;
  background: transparent;
  padding-top: 4rem;

  .avatar {
    position: absolute;
    width: 8rem;
    height: 8rem;
    top: 0;
    left: 50%;
    margin-left: -4rem;
  }

  .info {
    background: #286ff3;
    padding: 5rem 0 2rem 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }

  .qrCode {
    background: white;
    padding: 2rem 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    text-align: center;
  }
}
</style>
